<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

<script>

    // 跨域方法2: jsonp 
    // 原理: 引入资源(link script img)不受同源策略的影响  => 可以创建script标签向接口发送请求,并将接收的内容作为JS语句执行
    // (1) 前端提前 对应函数名 声明函数
    // (2) 后端返回 函数调用格式的字符串

    // script标签向接口发送请求,并将接受的内容作为JS语句执行  => 函数调用  
    // 函数封装 + 函数调用 

    function myFn(data) {
        console.log("数据接收成功", data);
    }


</script>
<!-- <script src="../js/1.js"></script> -->
<!-- <script src="../js/2.txt"></script> -->

<!-- script脚本载入外部文件时(发送http请求),会将载入的内容放到脚本中作为JS语句执行 -->
<!-- <script type="text/javascript" src="../js/2.txt"></script> -->

<!-- script脚本载入外部文件时(发送http请求),会将载入的内容放到脚本中作为JS语句执行 -->
<!-- <script type="text/javascript" src="http://localhost:3000/goods/jsonp"></script> -->

<script type="text/javascript"
    src="http://localhost:3000/goods/search/jsonp?wd=&col=id&type=asc&page=1&size=10&cb=myFn"></script>

<!-- 等价于
<script>
    // 验证: 接口返回的内容可以作为JS语句执行
    for (var i = 1; i <= 100; i++) {
        console.log(i)
    }

    // 一般情况下接口返回数据 (数组/对象)  => 没有变量接收数据,后续数据无法使用
    [1,2,3,4]

    // 返回函数调用格式的字符串
    myFn([1,2,3])
</script> -->

</html>